<template>
	<view class="activity">
		<view class="activity_tab">
			<view class="tab_item" @click="onChangeActive(0)" :class="{'is-active':isActive == 0}">
				<text class="txt">发布中</text>
				<view class="line" />
			</view>
			<view class="tab_item" @click="onChangeActive(1)" :class="{'is-active':isActive == 1}">
				<text class="txt">已完成</text>
				<view class="line" />
			</view>
		</view>

		<view class="activity_list">
			<view class="activity_item">
				<view class="item_head">
					<view class="head_left">
						<image class="head_img" src="" mode=""></image>
						<text class="head_txt">可二师姐</text>
					</view>
					<view class="head_right" @click="toSubmitList">
						<text>查看提交</text>
					</view>
				</view>
				<view class="item_content">
					<text>这想要趣游泳，有没有一起的小伙伴.</text>
				</view>
				<view v-if="image.length" class="item_images">
					<image class="image" src="/static/pages/title.jpg" mode=""></image>
				</view>

				<image class="item_more" src="/static/pages/more.png" mode=""></image>
			</view>
		</view>
		
		<u-loadmore :status="loading" />
	</view>
</template>

<script>
	import uLoadmore from '@/components/u-loadmore/u-loadmore.vue'
	export default {
		components:{
			uLoadmore
		},
		data() {
			return {
				isActive: 0,
				image: [1],
				list:[],
				loading:'loadmore',
				page:1
			}
		},
		onShow() {
			this.onReset()
			this.getActivitList()
		},
		methods:{
			onChangeActive(index){
				this.isActive = index
				this.onReset()
				this.getActivitList()
			},
			onReset(){
				this.loading = 'loadmore'
				this.page = 1
				this.list = []
			},
			async getActivitList() {
				this.loading = "loading"
				let params = {
					is_end: this.isActive,
					page: this.page,
				}
				this.$utils.postrequest("/api/activit_signup/index", params, (res)=> {
					if (res.code == 200) {
						this.list = this.list.concat(res.data)
						this.loading = res.data.length < 5 ? "nomore" : "loadmore"
						this.page++
					}
				})
			},
			toSubmitList(){
				uni.navigateTo({url:'./submitList'})
			}
		}
	}
</script>

<style scoped lang="scss">
	.activity {
		.activity_tab {
			padding: 36upx 30upx 22upx 30upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.tab_item+.tab_item {
				margin-left: 80upx;
			}

			.tab_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.txt {
					font-size: 28upx;
					color: #838383;
					margin-bottom: 12upx;
				}

				.line {
					display: none;
					width: 22upx;
					height: 9upx;
					background: linear-gradient(117deg, #0C97F8, #3FCAFE);
					border-radius: 5upx;
				}
			}

			.is-active {
				.txt {
					font-size: 32upx;
					font-weight: bold;
					color: #393939;
				}

				.line {
					display: block;
				}
			}
		}


		.activity_list {
			padding: 0 28upx 0 25upx;
			box-sizing: border-box;
			margin-bottom: 70upx;

			.activity_item+.activity_item {
				margin-top: 28upx;
			}

			.activity_item {
				background: #F8F8FA;
				border-radius: 20upx;
				padding: 45upx 34upx 30upx 30upx;
				box-sizing: border-box;
				position: relative;

				.item_head {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.head_left {
						display: flex;
						align-items: center;

						.head_img {
							width: 67upx;
							height: 67upx;
							border-radius: 50%;
							margin-right: 15upx;
						}

						.head_txt {
							font-size: 24upx;
							color: #272729;
						}
					}

					.head_right {
						width: 156upx;
						height: 82upx;
						line-height: 82upx;
						background: rgba(35, 181, 255, 0.2);
						border-radius: 41upx;
						font-size: 24upx;
						color: #23B5FF;
						text-align: center;
					}
				}
				
				.item_content{
					margin-top: 40upx;
					font-size: 24upx;
					color: #736F84;
				}

				.item_images {
					margin-top: 32upx;
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					grid-row-gap: 20upx;
					grid-column-gap: 20upx;
					
					.image{
						width: 100%;
						height: 143upx;
						border-radius: 10upx;
					}
				}

				.item_more {
					position: absolute;
					z-index: 1;
					bottom: 25upx;
					right: 37upx;
					width: 26upx;
					height: 5upx;
				}
			}
		}
	}
</style>
